<template>
	<div>
		<el-container style="height: 500px; border: 1px solid #eee">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<el-menu default-active="activePath" class="el-menu-vertical-demo" @select="handleSelect"
					 background-color="#333233" text-color="#fff" active-text-color="#ffd04b">
					<el-menu-item index="main">
						<i class="el-icon-menu"></i>
						<span slot="title">员工主页</span>
					</el-menu-item>
	<!-- 				<el-menu-item index="2" disabled>
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item index="3" disabled>
						<i class="el-icon-menu"></i>
						<span slot="title">导航三</span>
					</el-menu-item> -->
					<el-menu-item index="leaveMessageReply">
						<i class="el-icon-menu"></i>
						<span slot="title">留言回复</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="text-align: right; font-size: 12px">


					<span>员工编号：{{staffId}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>员工姓名：{{staffName}}</span>
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				staffId:'123456',
				staffName:'张三'
			}
		},
		computed: {
			activePath() {
				return this.$route.path
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				this.$router.push({
					path: key,
					params: {
						data: ''
					}
				})
				console.log(key, keyPath);
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>